<template>
  <div class="headerWrapper">
    <nav class="header">
      <ul class="headerList headerLeft">
        <li>
          <a>
            <img src="@/assets/img/common/header/spring-logo.png" />
          </a>
        </li>
        <li v-for="(item,index) in listLeft" :key="index">
          <router-link :to="item.topnavLink" class="topnavDiv" tag="div">{{item.name}}</router-link>
        </li>
      </ul>
      <ul class="headerList headerRight">
        <li>
          <div class="searchWrapper">
            <input class="searchText" placeholder="搜CSDN" />
            <div class="searchButtonWrapper">
              <span class="iconfont serchButton">&#xe61b;</span>
            </div>
          </div>
        </li>
        <li>
          <a @click="writeBlog()">
            <span class="iconfont writeBlogIcon">&#xe629;</span>写博客
          </a>
        </li>
        <li>
          <a @click="lookOverMessage()">
            <span class="iconfont uploadResourceIcon">&#xe623;</span>消息
          </a>
        </li>
        <li v-if="isLogin">
          <a
            class="loginCenter"
            @mouseenter="userActive()"
            @mouseleave="userDefault()"
            href="/userCenter"
            target="_blank"
          >
            <img class="headImg" src="@/assets/img/common/header/headImg.png" />
          </a>


          <div
            class="userControl"
            @mouseenter="userActive()"
            @mouseleave="userDefault()"
            v-show="userVisible"
          >
            <ul class="userConList">
              <li class="userItem" v-for="(item,index) of userConList" :key="index">
                <a v-if="item.text==='退出'" class="itemLink" @click="checkOut()">
                  <span class="icon iconfont" v-html="item.icon"></span>
                  <span class="itemText">{{item.text}}</span>
                </a>
                <a v-else class="itemLink" :href="item.link">
                  <span class="icon iconfont" v-html="item.icon"></span>
                  <span class="itemText">{{item.text}}</span>
                </a>
              </li>
            </ul>
          </div>
        </li>
        <li v-else>
          <a
            class="loginCenter"
            @click="centerDialogVisible=true"
          >
            <img class="headImg" src="@/assets/img/common/header/headImg.png" />
          </a>
        </li>
      </ul>
    </nav>
    <el-dialog
    :visible.sync="centerDialogVisible"
    width="30%"
    center>

      <el-container>
        <el-header style="font-weight: 900; font-size: 18px; text-align: center">
          登录享受更多功能哦
        </el-header>
        <el-main>
          <el-menu default-active="1" class="el-menu-demo" mode="horizontal" style="text-align: center">
            <el-row :gutter="20">
              <el-col :span="12"><el-menu-item index="1" @click="showIt=!showIt">账号密码登录</el-menu-item></el-col>
              <el-col :span="12"><el-menu-item index="2" @click="showIt=!showIt">微信扫码登录</el-menu-item></el-col>
            </el-row>
          </el-menu>
        </el-main>
        <el-main v-if="!showIt">
          <el-row>
            <el-col>
              <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon>
                <el-form-item prop="userAccount">
                  <el-input
                    placeholder="手机号/邮箱/用户账号"
                    v-model="dataForm.userAccount"
                    clearable>
                  </el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input
                    placeholder="密码"
                    v-model="dataForm.password"
                    show-password>
                  </el-input>
                </el-form-item>
                <el-form-item prop="captcha">
                  <el-row :gutter="20">
                    <el-col :span="13">
                      <el-input
                        placeholder="验证码"
                        v-model="dataForm.captcha"
                        >
                      </el-input>
                    </el-col>
                    <el-col :span="11">
                      <el-image>

                      </el-image>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12" :offset="8">
              <el-button round @click="submitBlog()">立即登录</el-button>
            </el-col>
          </el-row>
        </el-main>
        <el-main v-else>
          <div>
            待开发
          </div>
          <el-input
            placeholder="手机号/邮箱/用户账号"
            v-model="input"
            clearable>
          </el-input>
          <el-input
            placeholder="密码"
            v-model="input"
            show-password>
          </el-input>
          <el-button round>立即登录1</el-button>
        </el-main>

      </el-container>
    </el-dialog>
  </div>


</template>

<script>


import store from "../../../store";
import storage from "../../../model/storage";

export default {
  name: 'Header',
  components:{
    store,
    storage
  },
  data () {
    return {
      isLogin:0,
      dataForm: {
        userAccount: '',
        password: '',
        captcha: ''
      },
      dataRule: {
        userAccount: [
          { required: true, message: '帐号不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ],
        captcha: [
          { required: true, message: '验证码不能为空', trigger: 'blur' }
        ]
      },
      centerDialogVisible:false,
      showIt: false,
      listLeft: [
        { name: '首页', topnavLink: '/index' },
        { name: '博客', topnavLink: '/blog' },
        { name: 'BlogAI', topnavLink: '/blogai' }
      ],
      userConList: [
        { icon: '&#xe605;', link: '', text: '我的关注' },
        { icon: '&#xe60a;', link: '', text: '我的喜欢' },
        { icon: '&#xe664;', link: '', text: '个人中心' },
        { icon: '&#xe67b;', link: '', text: '帐号设置' },
        { icon: '&#xe603;', link: '', text: '我的博客' },
        { icon: '&#xe646;', link: '', text: '管理博客' },
        { icon: '&#xe77c;', link: '', text: '帮助' },
        { icon: '&#xe69c;', link: '', text: '退出' }
      ],
      userVisible: false
    }
  },
  methods: {
    /**
     * 是否登录
     */
    checkLogin(){
      // let token = storage.get('token');
      let token = this.$cookie.get('token');
      this.isLogin = token !== null
      console.log(this.isLogin)

    },

    /**
     * 登录
     */
    submitBlog(){
      this.$http({
        url: this.$http.adornUrl('/user/login'),
        method: 'post',
        data: this.$http.adornData({
          'userAccount': this.dataForm.userAccount,
          'password': this.dataForm.password,
          'captcha': this.dataForm.captcha
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.$cookie.set('token', data.token)
          // storage.set('token', data.token)
          this.centerDialogVisible=false
          this.$router.push({
            path:'/',
          });
          this.refresh()
          // this.$router.replace({ name: 'home' })
        } else {
          // this.getCaptcha()
          this.$message.error(data.msg)
        }
      })
    },


    /**
     * 登出
     */
    checkOut(){
      console.log()
      this.$http({
        url: this.$http.adornUrl('/user/logout'),
        method: 'get',
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.$cookie.delete('token')
          this.refresh()
        } else {
         console.log(data.msg)
        }
      })


    },


    showItIF(){
      this.showIt=true
    },
    /**
     * 写博客
     */
    writeBlog(){
      let token=this.$cookie.get('token')
      if(token===null){
        this.centerDialogVisible=true;
        return
      }
      this.$router.push({
        path:'/writeBlog',
      });
    },

    /**
     * 查看消息
     */
    lookOverMessage(){
      let token=this.$cookie.get('token')
      console.log(token)
      if(token===null){
        this.centerDialogVisible=true;
        return
      }
      this.$router.push({
        path:'/messages/comment',
      });
    },

    refresh() {
      location.reload();
    },
    userActive () {
      this.userVisible = true
      $('.headImgIcon').css('transition', 'transform 0.5s')
      $('.headImgIcon').css('transform', 'rotate(180deg)')
    },
    userDefault () {
      this.userVisible = false
      $('.headImgIcon').css('transition', 'transform 0.5s')
      $('.headImgIcon').css('transform', 'rotate(0deg)')
    },
  },
  mounted() {
    this.checkLogin();
  }
}
</script>

<style lang="stylus" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
@import '~@/assets/styles/mixins.styl'
.router-link-active
  color #ffd900
  border-bottom 2px solid #ffd900
.headerWrapper
  //position sticky
  //top 0
  height 40px
  min-width 1200px
  width 100%
  font-size 14px
  background url('~@/assets/img/common/header/header-spring.jpg') repeat-x
  box-shadow 0 2px 4px 0 rgba(0, 0, 0, 0.05)
  .header
    display flex
    height 100%
    margin 0 52px
    .headerLeft
      flex 7
      li
        height 40px
        padding 0 8px
        float left
        text-align center
        color #fff
        cursor pointer
        verticalMiddle()
        &:hover
          color #ffd900
        .topnavDiv
          height 38px
          line-height 38px
    .headerRight
      flex 4
      position relative
      top 0
      left 0
      li
        height 100%
        padding 0 8px
        float left
        text-align center
        verticalMiddle()
        &:hover
          color #CA0C16
        a
          height 26px
          line-height 26px
          color #fff
          font-size 14px
          &:hover
            color #ffd900
          .iconfont
            font-size 16px
            margin-right 3px
          .writeBlogIcon
            color #CA0C16
          .makeMoneyIcon
            color orange
          .uploadResourceIcon
            color #fff
            font-weight 600
        &:first-child
          padding 0
        .searchWrapper
          width 300px
          height 26px
          border 1px solid #CCC
          border-radius 4px
          color #aaa
          background #fff
          .searchText
            color #4D4D4D
            float left
            width 122px
            padding 4px 0 4px 7px
            border 0
            height 18px
            border-radius 10px
          input::-webkit-input-placeholder
            /* placeholder颜色 */
            color #ccc
          .searchButtonWrapper
            height 100%
            width 30px
            float right
            .serchButton
              font-size 20px
              height 100%
              line-height 100%
        .loginCenter
          width 26px
          height 40px
          line-height 40px
          .headImg
            width 26px
            height auto
            background #fff
            border-radius 50%
        .headImgIcon
          color #fff
          font-size 10px
          position absolute
          right 13%
          width 16px
          height 40px
          line-height 40px
          cursor default
        .userControl
          position absolute
          top 40px
          right 10px
          z-index 99999
          background url('~@/assets/img/common/header/header-spring.jpg')
          border-radius 0 0 4px 4px
          box-shadow 0 4px 8px 0 rgba(0, 0, 0, 0.1)
          width 124px
          padding 16px 0
          .userConList
            .userItem
              position relative
              padding 0
              width 100%
              .itemLink
                display block
                margin 0 16px
                .iconfont
                  position absolute
                  left 16px
                  font-size 14px
                  color #fff
                .itemText
                  position absolute
                  left 40px
              &:nth-child(4), &:nth-child(8), &:nth-child(10)
                padding-bottom 10px
                border-bottom 1px solid #E0E0E0
              &:nth-child(5), &:nth-child(9), &:nth-child(11)
                padding-top 10px
</style>
